.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  object-fit: cover;

  &::before {
    content: ""; /* 必须添加内容才能显示伪元素 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--common-bg); /* 背景图片 */
    background-size: 130%;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(10px); /* 初始状态背景模糊 */
    animation: background-zoom-blur 1s ease-in-out forwards;
    z-index: -1; /* 让伪元素位于背景层，保证内容在其上面 */
    object-fit: cover;
  }

  @keyframes background-zoom-blur {
    0% {
      background-size: 120%;
      filter: blur(10px);
    }
    30% {
      background-size: 115%; /* 缩放稍微减缓 */
      filter: blur(7px);     /* 模糊度减少 */
    }
    60% {
      background-size: 105%; /* 缩放接近最终状态 */
      filter: blur(2px);     /* 模糊度进一步减少 */
    }
    90% {
      background-size: 101%; /* 缩放接近最终状态 */
      filter: blur(2px);     /* 模糊度进一步减少 */
    }
    95% {
      background-size: 100%; /* 缩放接近最终状态 */
      filter: blur(2px);     /* 模糊度进一步减少 */
    }
    100% {
      background-size: cover;
      filter: blur(0);
    }
  }

  .hello {
    width: 200px;
    height: 30px;
    @extend %ground-glass;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-family: AliDL, serif;
    position: absolute;
  }

  // 定义一个动画，从top为-100px的地方变成top为20，然后在消失
  .hello {
    animation: hello-animation 4s ease-in-out forwards;
  }

  @keyframes hello-animation {
    0% {
      top: -100px;
      opacity: 1;
    }
    20% {
      top: 70px;
      opacity: 1; /* 继续保持可见 */
    }
    100% {
      top: 70px;
      opacity: 0; /* 完全透明 */
    }
  }


  .timeContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;

    .time {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #ffffff;
      font-family: AliDL, serif;
      transition: all .3s ease-in-out;

      &:hover {
        cursor: pointer;
        // 放大
        transform: scale(1.2);
        transition: all .3s ease-in-out;
      }

      .num {
        font-size: 3.5rem;
        font-weight: 700;
        margin: 6px 0;
        text-shadow: 0 0 8px rgba(0, 0, 0, .4);
      }

      .separator {
        opacity: .8;
        font-size: 2.8rem;
        display: inline-block;
        margin: 0 5px;
        transform: translateY(-4px);
        -webkit-animation: separator-breathe .7s infinite alternate;
        animation: separator-breathe .7s infinite alternate;
      }
    }

    .lunar {
      font-size: .9rem;
      opacity: .6;
      text-shadow: 0 0 8px rgba(0, 0, 0, .4);
      color: white;
      font-family: AliDL, serif;
    }

    .monDayWeek {
      font-weight: 700;
      font-size: 1.15rem;
      opacity: .8;
      margin: 6px 0;
      text-shadow: 0 0 8px rgba(0, 0, 0, .4);
      color: white;
      font-family: AliDL, serif;
    }
  }

  .banner {
    width: 640px;
    height: 480px;

    @extend %ground-glass;

    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }

  .copyright {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: .8rem;
    opacity: .6;
    font-family: AliDL, serif;
    text-shadow: 0 0 8px rgba(0, 0, 0, .4);
    cursor: pointer;

    &:hover {
      color: #fff;
      text-decoration: underline;
    }
  }
}

@keyframes separator-breathe {
  0% {
    opacity: .8;
  }
  70% {
    opacity: .8;
  }
  100% {
    opacity: .2;
  }
}
